<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible="visible"
      @close="closeFn"
      width="60%"
      ref="dialogff"
    >
      <el-form label-position="right" label-width="90px" :model="form" :rules="rules" ref="fff">
        <el-form-item label="文章标题:"  prop="title">
          <el-input v-model="form.title" placeholder="请输入文章标签" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="文章内容:"  prop="articleBody">
          <!-- 富文本 -->
           <quill-editor :options="editorOption" v-model="form.articleBody" placeholder="请输入文章内容" @blur="$refs.fff.validateField('articleBody')" style="width: 90%"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址：" >
          <el-input v-model="form.videoURL" placeholder="请输入视频地址" style="width: 90%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="delSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
// 富文本设置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
  ['blockquote'], // 引用 代码块
  ['clean'], // 清除文本格式
  ['code-block', 'link', 'image'] // 链接、图片、视频
]
export default {
  components: {
    quillEditor
  },
  props: {
    visible: {
      type: Boolean
    },
    title: {
      type: String
    },
    form: {
      type: Object
    }
  },
  data () {
    return {
      editorOption: {
        // 富文本设置
        theme: 'snow', // or 'bubble'
        placeholder: '请输入文章内容',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { placeholder: '请输入文章内容' }
        ]
      }
    }
  },
  methods: {
    async delSubmit () {
      // await this.$refs.dialogff.validate()
      this.$emit('addSubmit', this.form)
    },
    closeFn () {
      this.$emit('update:visible', false)
      this.$emit('update:form', {})
    }
  }
}
</script>

<style scoped lang="less"></style>
